<!--
版权所有：© 2025 Your Company Name. All rights reserved.
作者：尋鯨錄
网站：hhttps://www.xunjinlu.fun/
说明：此网页代码为尋鯨錄编写,开放代码,可随意使用,请勿收费,在使用时请保留以上内容。
-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="赞赏,支持,打赏,微信支付,支付宝,QQ支付,USDT">
    <meta name="description" content="赞赏支持页面，支持多种支付方式">
    <title>赞赏支持 - 尋鯨錄</title>
    <link rel="icon" href="https://www.xunjinlu.fun/img/logo/ico.png" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-color: #f5f5f5;
            --text-color: #333;
            --card-bg: white;
            --shadow-color: rgba(0,0,0,0.1);
        }

        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --text-color: #f5f5f5;
            --card-bg: #2d2d2d;
            --shadow-color: rgba(0,0,0,0.3);
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
            min-height: 100vh;
            position: relative;
        }

        .theme-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--card-bg);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px var(--shadow-color);
            transition: transform 0.3s ease;
        }

        .theme-switch:hover {
            transform: scale(1.1);
        }

        .theme-switch svg {
            width: 24px;
            height: 24px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            padding-top: 80px;
        }

        .profile-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px var(--shadow-color);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .avatar:hover {
            transform: scale(1.05) rotate(5deg);
        }

        .avatar:active {
            transform: scale(0.95) rotate(-5deg);
        }

        .avatar.clicked {
            animation: avatarClick 0.5s ease;
        }

        @keyframes avatarClick {
            0% { transform: scale(1); }
            50% { transform: scale(0.9) rotate(-10deg); }
            100% { transform: scale(1) rotate(0); }
        }

        .daily-quote {
            font-size: 1.2rem;
            margin: 20px 0;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .typing {
            border-right: 2px solid var(--text-color);
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: var(--text-color) }
        }

        .payment-methods {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }

        .payment-method {
            width: 100px;
            height: 100px;
            padding: 15px;
            background: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 2px 10px var(--shadow-color);
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .payment-method:hover {
            transform: translateY(-5px);
        }

        .payment-method img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px var(--shadow-color);
            max-width: 300px;
            width: 90%;
        }

        .modal-content img {
            width: 100%;
            border-radius: 10px;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background: var(--card-bg);
            border-top: 1px solid var(--shadow-color);
            font-size: 12px;
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .footer-content.single-line {
            flex-direction: row;
            justify-content: center;
            gap: 10px;
        }

        .footer-content.single-line .separator {
            display: inline;
        }

        .footer-content:not(.single-line) .separator {
            display: none;
        }

        .footer-content a {
            text-decoration: none;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .footer-content img {
            width: 14px;
            height: 14px;
        }

        .separator {
            color: var(--text-color);
            opacity: 0.5;
        }

        .copyright-link {
            text-decoration: none;
            color: var(--text-color);
            transition: color 0.3s ease;
        }

        .copyright-link:hover {
            color: #007bff;
        }

        .footer-content a:hover {
            color: #007bff;
        }

        @media (max-width: 768px) {
            .payment-method {
                width: 80px;
                height: 80px;
            }
            
            .avatar {
                width: 80px;
                height: 80px;
            }

            .daily-quote {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <button class="theme-switch" onclick="toggleTheme()">
        <svg id="themeIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
            <path d="M554.84811 298.412549h-85.226521a21.366313 21.366313 0 0 1 0-42.732626h85.226521a21.366313 21.366313 0 0 1 0 42.732626z" fill="#F6BB42"></path>
            <path d="M810.527675 724.664522A511.59786 511.59786 0 0 1 331.993886 33.064429 511.35913 511.35913 0 1 0 990.768638 692.316641a509.449292 509.449292 0 0 1-180.240963 32.347881z" fill="#FFCE54"></path>
            <path d="M554.84811 980.344087a511.35913 511.35913 0 0 1-381.967604-850.832838 511.239765 511.239765 0 1 0 721.441312 721.799407A509.329927 509.329927 0 0 1 554.84811 980.344087z" fill="#F6BB42"></path>
            <path d="M767.914414 277.284966a21.366313 21.366313 0 1 1-21.366313-21.366313 21.366313 21.366313 0 0 1 21.366313 21.366313z" fill="#4A89DC"></path>
            <path d="M661.440945 490.35127a21.366313 21.366313 0 1 1-21.366313-21.366313 21.366313 21.366313 0 0 1 21.366313 21.366313z" fill="#48CFAD"></path>
            <path d="M1023.593979 234.31361a21.366313 21.366313 0 1 1-21.366313-21.246948 21.366313 21.366313 0 0 1 21.366313 21.246948z" fill="#ED5564"></path>
            <path d="M640.074632 21.247306A21.366313 21.366313 0 1 1 618.827684 0.000358a21.366313 21.366313 0 0 1 21.246948 21.246948z" fill="#AC92EB"></path>
            <path d="M512.234849 192.058444a21.366313 21.366313 0 0 0-21.246948 21.366313v127.720418a21.366313 21.366313 0 1 0 42.613261 0v-127.720418a21.366313 21.366313 0 0 0-21.366313-21.366313z" fill="#FFCE54"></path>
            <path d="M874.387884 426.371696a21.366313 21.366313 0 0 0-21.246948 21.366313v127.839783a21.366313 21.366313 0 0 0 42.613261 0V447.738009a21.366313 21.366313 0 0 0-21.366313-21.366313z" fill="#F6BB42"></path>
            <path d="M917.001145 532.964531H831.774623a21.366313 21.366313 0 0 1 0-42.613261h85.226522a21.366313 21.366313 0 1 1 0 42.613261z" fill="#FFCE54"></path>
        </svg>
    </button>

    <div class="container">
        <div class="profile-section">
            <img src="https://www.xunjinlu.fun/img/logo/ico.png" alt="头像" class="avatar" onclick="avatarClick()">
            <div class="daily-quote" id="dailyQuote"></div>
        </div>

        <div class="payment-methods">
            <div class="payment-method" onclick="showQRCode('wechat')">
                <img src="http://api.xunjinlu.fun/zs/img/wei.png" alt="微信支付">
            </div>

            <div class="payment-method" onclick="showQRCode('alipay')">
                <img src="http://api.xunjinlu.fun/zs/img/zhi.png" alt="支付宝">
            </div>

            <div class="payment-method" onclick="showQRCode('qq')">
                <img src="http://api.xunjinlu.fun/zs/img/qq.png" alt="QQ支付">
            </div>

            <div class="payment-method" onclick="showQRCode('usdt')">
                <img src="http://api.xunjinlu.fun/zs/img/USDT.png" alt="USDT">
            </div>
        </div>

        <div class="modal" id="qrModal" onclick="closeModal()">
            <div class="modal-content" onclick="event.stopPropagation()">
                <img id="qrCodeImage" src="" alt="收款二维码">
            </div>
        </div>

        <footer class="footer">
            <div class="footer-content" id="footerContent">
                <a href="https://www.xunjinlu.fun" target="_blank" class="copyright-link">
                    Copyright © <script>document.write(new Date().getFullYear())</script> 尋鯨錄
                </a>
                <span class="separator">|</span>
                <a href="https://beian.miit.gov.cn/" target="_blank">
                    <img src="https://www.xunjinlu.fun/img/logo/icp.ico" alt="ICP备案">
                    滇ICP备2023007716号-1
                </a>
                <span class="separator">|</span>
                <a href="https://www.beian.gov.cn/" target="_blank">
                    <img src="https://www.xunjinlu.fun/img/logo/ga.png" alt="公安备案">
                    滇公网安备53032202530370号
                </a>
            </div>
        </footer>

        <script>
            // 主题切换
            function toggleTheme() {
                const body = document.body;
                const themeIcon = document.getElementById('themeIcon');
                const isDark = body.getAttribute('data-theme') === 'dark';
                
                if (isDark) {
                    body.removeAttribute('data-theme');
                    themeIcon.innerHTML = `<path d="M554.84811 298.412549h-85.226521a21.366313 21.366313 0 0 1 0-42.732626h85.226521a21.366313 21.366313 0 0 1 0 42.732626z" fill="#F6BB42"></path>
                    <path d="M810.527675 724.664522A511.59786 511.59786 0 0 1 331.993886 33.064429 511.35913 511.35913 0 1 0 990.768638 692.316641a509.449292 509.449292 0 0 1-180.240963 32.347881z" fill="#FFCE54"></path>
                    <path d="M554.84811 980.344087a511.35913 511.35913 0 0 1-381.967604-850.832838 511.239765 511.239765 0 1 0 721.441312 721.799407A509.329927 509.329927 0 0 1 554.84811 980.344087z" fill="#F6BB42"></path>
                    <path d="M767.914414 277.284966a21.366313 21.366313 0 1 1-21.366313-21.366313 21.366313 21.366313 0 0 1 21.366313 21.366313z" fill="#4A89DC"></path>
                    <path d="M661.440945 490.35127a21.366313 21.366313 0 1 1-21.366313-21.366313 21.366313 21.366313 0 0 1 21.366313 21.366313z" fill="#48CFAD"></path>
                    <path d="M1023.593979 234.31361a21.366313 21.366313 0 1 1-21.366313-21.246948 21.366313 21.366313 0 0 1 21.366313 21.246948z" fill="#ED5564"></path>
                    <path d="M640.074632 21.247306A21.366313 21.366313 0 1 1 618.827684 0.000358a21.366313 21.366313 0 0 1 21.246948 21.246948z" fill="#AC92EB"></path>
                    <path d="M512.234849 192.058444a21.366313 21.366313 0 0 0-21.246948 21.366313v127.720418a21.366313 21.366313 0 1 0 42.613261 0v-127.720418a21.366313 21.366313 0 0 0-21.366313-21.366313z" fill="#FFCE54"></path>
                    <path d="M874.387884 426.371696a21.366313 21.366313 0 0 0-21.246948 21.366313v127.839783a21.366313 21.366313 0 0 0 42.613261 0V447.738009a21.366313 21.366313 0 0 0-21.366313-21.366313z" fill="#F6BB42"></path>
                    <path d="M917.001145 532.964531H831.774623a21.366313 21.366313 0 0 1 0-42.613261h85.226522a21.366313 21.366313 0 1 1 0 42.613261z" fill="#FFCE54"></path>`;
                } else {
                    body.setAttribute('data-theme', 'dark');
                    themeIcon.innerHTML = `<path d="M270.387022 463.499421A226.484357 226.484357 0 1 1 496.871379 689.983778a226.484357 226.484357 0 0 1-226.484357-226.484357z" fill="#FFDA6A"></path>
                    <path d="M496.12978 823.76825a16.31518 16.31518 0 0 1-8.899189-2.966396L444.959444 790.396292a16.611819 16.611819 0 0 1-3.707996-22.989571 16.760139 16.760139 0 0 1 23.137892-3.856315l33.371958 24.176129 36.190035-22.247972a16.463499 16.463499 0 0 1 16.908458 28.329085l-46.127462 27.735805a16.611819 16.611819 0 0 1-8.602549 2.224797z m193.705678-88.10197a16.463499 16.463499 0 0 1-4.746234-32.482039l41.677868-10.382387 6.674391-40.19467a16.463499 16.463499 0 0 1 32.630359 5.339514l-8.454229 51.318655a16.908459 16.908459 0 0 1-12.310545 13.348784l-52.208574 13.052143zM311.471611 733.738123a12.013905 12.013905 0 0 1-3.263036 0l-51.318656-8.45423a16.463499 16.463499 0 0 1-13.348783-12.310544l-13.052144-52.060255a16.463499 16.463499 0 1 1 31.59212-8.30591l10.382387 41.826188 40.49131 6.526072a16.463499 16.463499 0 0 1-1.483198 32.778679z m187.772885-17.650058a251.253766 251.253766 0 1 1 250.660487-251.253766 251.253766 251.253766 0 0 1-251.105446 251.253766z m0-32.926999a218.326767 218.326767 0 1 0-218.771727-218.326767 218.326767 218.326767 0 0 0 218.326768 218.326767z m-312.954809-156.180765a16.01854 16.01854 0 0 1-14.831981-7.86095l-27.735806-46.275782a16.463499 16.463499 0 0 1 0.741599-18.095017l29.663963-42.271148a16.463499 16.463499 0 0 1 26.697567 19.281576L177.983778 465.279258l22.099652 36.783314a16.463499 16.463499 0 0 1-5.636153 22.544612 14.831981 14.831981 0 0 1-8.15759 2.373117z m625.019699 0a14.831981 14.831981 0 0 1-7.71263-2.373117 16.463499 16.463499 0 0 1-5.636153-22.544612l22.099652-36.783314-23.87949-33.520278a16.16686 16.16686 0 0 1 3.707995-22.841251 16.463499 16.463499 0 0 1 22.989571 3.559675l30.405562 42.271148a16.31518 16.31518 0 0 1 0 18.095017L826.141367 519.119351a16.01854 16.01854 0 0 1-14.831981 7.86095zM338.910776 470.173812a16.463499 16.463499 0 0 1-14.831981-17.501738c3.263036-50.577057 19.429896-90.030127 49.242178-117.469293a185.103129 185.103129 0 0 1 118.655852-43.012746 16.463499 16.463499 0 1 1 1.779838 32.926999c-44.495944 2.373117-76.533024 14.090382-98.780997 34.410197s-35.745075 50.577057-38.563152 95.221321a16.611819 16.611819 0 0 1-17.501738 15.42526zM749.015064 294.414832a16.611819 16.611819 0 0 1-14.831982-13.793743l-7.41599-40.639629-41.677868-10.382387a16.463499 16.463499 0 0 1 8.00927-32.03708l52.208574 13.052144a16.760139 16.760139 0 0 1 12.310545 13.348783l8.454229 51.318656a16.908459 16.908459 0 0 1-13.645423 18.984936z m-504.28737-1.928158a12.310545 12.310545 0 0 1-3.263036 0 16.31518 16.31518 0 0 1-12.013905-20.023175l13.052144-52.208574a16.760139 16.760139 0 0 1 13.348783-12.310545l51.318656-8.30591a16.463499 16.463499 0 1 1 5.191194 32.48204l-40.49131 6.674392-10.382387 41.677867a16.463499 16.463499 0 0 1-16.16686 12.013905z m209.872538-120.287369a16.463499 16.463499 0 0 1-10.234067-29.663963l42.271147-29.663963a16.463499 16.463499 0 0 1 18.095017 0l46.127462 27.735805a16.31518 16.31518 0 0 1 5.636153 22.544612 16.463499 16.463499 0 0 1-22.544611 5.784473l-36.783314-22.247972-32.778679 22.396292a17.056779 17.056779 0 0 1-9.195829 3.114716z" fill="#333333"></path>`;
                }
            }

            // 显示二维码
            function showQRCode(type) {
                const modal = document.getElementById('qrModal');
                const qrCodeImage = document.getElementById('qrCodeImage');
                
                switch(type) {
                    case 'wechat':
                        qrCodeImage.src = 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/79be0220296c9afe2ddde6508b73a7ee376da955761f8957433aeecd84fd4af3902143bfdb35c6c7efbddb4d3ad1f6bc?pictype=scale&from=30111&version=3.3.3.3&fname=1726940465619_590217309.png&size=1024';
                        break;
                    case 'alipay':
                        qrCodeImage.src = 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2561d6cf60717c71cdc9e0a5e78cb531ada85ae8707389f7a2dea0f3dd51ce832b2b67446af1c32d0ebe6d84225e7c23?pictype=scale&from=30111&version=3.3.3.3&fname=%E7%BB%8F%E8%90%A5%E7%A0%81.png&size=1024';
                        break;
                    case 'qq':
                        qrCodeImage.src = 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/4e99b7fc879ed1a61485af16aa15b1c1332431057ea82bdb4ba7c26709429004796104e3b60532534b720ea576ca4b3f?pictype=scale&from=30111&version=3.3.3.3&fname=1715024290738_1663760545.png&size=1024';
                        break;
                    case 'usdt':
                        qrCodeImage.src = 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/61eabe4cfb32f8cb2cb0d04d89630987a83cc539e72ddd4d2087e6038ada686ad598d865b71d788c9bb89e6f9b6be3d3?pictype=scale&from=30111&version=3.3.3.3&fname=%E6%AC%A7%E6%98%93usdt.png&size=1024';
                        break;
                }
                
                modal.classList.add('active');
            }

            function closeModal() {
                document.getElementById('qrModal').classList.remove('active');
            }

            // 获取每日一言
            async function getDailyQuote() {
                try {
                    const response = await fetch('https://yyapi.xpdbk.com/api/ian/a', {
                        method: 'GET',
                        headers: {
                            'Accept': 'text/plain',
                            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
                            'Accept-Language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7'
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    
                    const text = await response.text();
                    if (text && text.trim()) {
                        typeWriter(text);
                    } else {
                        throw new Error('获取内容为空');
                    }
                } catch (error) {
                    console.error('获取每日一言失败:', error);
                    typeWriter('获取每日一言失败，请稍后重试。');
                }
            }

            // 打字机效果
            function typeWriter(text) {
                const quoteElement = document.getElementById('dailyQuote');
                quoteElement.innerHTML = '';
                quoteElement.classList.add('typing');
                
                let i = 0;
                const speed = 50;
                
                function type() {
                    if (i < text.length) {
                        quoteElement.innerHTML += text.charAt(i);
                        i++;
                        setTimeout(type, speed);
                    } else {
                        quoteElement.classList.remove('typing');
                    }
                }
                
                type();
            }

            // 头像点击效果
            function avatarClick() {
                const avatar = document.querySelector('.avatar');
                avatar.classList.add('clicked');
                setTimeout(() => {
                    avatar.classList.remove('clicked');
                }, 500);
            }

            // 预加载图片
            function preloadImages() {
                const images = [
                    'https://www.xunjinlu.fun/img/logo/ico.png',
                    'https://www.xunjinlu.fun/img/logo/icp.ico',
                    'https://www.xunjinlu.fun/img/logo/ga.png',
                    'http://api.xunjinlu.fun/zs/img/wei.png',
                    'http://api.xunjinlu.fun/zs/img/zhi.png',
                    'http://api.xunjinlu.fun/zs/img/qq.png',
                    'http://api.xunjinlu.fun/zs/img/USDT.png',
                    'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/79be0220296c9afe2ddde6508b73a7ee376da955761f8957433aeecd84fd4af3902143bfdb35c6c7efbddb4d3ad1f6bc?pictype=scale&from=30111&version=3.3.3.3&fname=1726940465619_590217309.png&size=1024',
                    'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2561d6cf60717c71cdc9e0a5e78cb531ada85ae8707389f7a2dea0f3dd51ce832b2b67446af1c32d0ebe6d84225e7c23?pictype=scale&from=30111&version=3.3.3.3&fname=%E7%BB%8F%E8%90%A5%E7%A0%81.png&size=1024',
                    'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/4e99b7fc879ed1a61485af16aa15b1c1332431057ea82bdb4ba7c26709429004796104e3b60532534b720ea576ca4b3f?pictype=scale&from=30111&version=3.3.3.3&fname=1715024290738_1663760545.png&size=1024',
                    'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/61eabe4cfb32f8cb2cb0d04d89630987a83cc539e72ddd4d2087e6038ada686ad598d865b71d788c9bb89e6f9b6be3d3?pictype=scale&from=30111&version=3.3.3.3&fname=%E6%AC%A7%E6%98%93usdt.png&size=1024'
                ];

                images.forEach(src => {
                    const img = new Image();
                    img.src = src;
                });
            }

            // 检查屏幕宽度并调整底部布局
            function checkScreenWidth() {
                const footerContent = document.getElementById('footerContent');
                if (window.innerWidth < 600) {
                    footerContent.classList.remove('single-line');
                } else {
                    footerContent.classList.add('single-line');
                }
            }

            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', () => {
                preloadImages();
                getDailyQuote();
                checkScreenWidth();
                window.addEventListener('resize', checkScreenWidth);
            });
        </script>
    </div>
</body>
</html> 